import { useDrag } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
import { Button } from 'antd'

const style = {
  cursor: 'move',
  width: '40%',
}

export default function Box({ type, text }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemTypes.BOX,
    item: { type },
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {
        alert(`插入 ${item.type} 进去吗`)
      }
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      handlerId: monitor.getHandlerId(),
    }),
  }))
  const opacity = isDragging ? 0.4 : 1

  // 根据type渲染不同组件
  function showFC() {
    return <div ref={drag}><Button type='primary'>{text}</Button></div>
  }
  return (
    showFC()
  )
}